<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>房间列表</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <!-- 引入jquary-ui插件 -->
    <link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
    <script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
    <script>
        //页面加载时触发
        $(function () {
            //查询房间列表的接口
            queryRoomList();
        });

        //查询欢乐豆流水列表
        function queryRoomList() {
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/room/list",
                success: function (data) {
                    console.log(data);

                    //data -> 记录列表
                    //for -> data -> <tr></tr> -> <tbody>
                    for (var i = 0; i < data.length; i++) {
                        //从data数组中取出第i条记录
                        var item = data[i];
                        var html = "<tr><td>" + item.rid + "</td> <td>"
                            + item.nickName + "</td> <td>"
                            + item.info + "</td> <td>"
                            + (item.isPass == 0 ? "无密码" : "有密码") + "</td> <td>"
                            + (item.status == 0 ? "等待中" : "游戏开始") + "</td> <td>"
                            + (item.status == 0 ? "<button onclick=\"addRoom(" + item.rid + "," + item.isPass + ")\">加入对局</button>" : "<button>观察对局</button>")
                            + "</td></tr>";

                        $("#mytbody").append(html);
                    }
                }
            });
        }

        /*加入房间*/
        var global_rid;

        function addRoom(rid, isPass) {
            // alert(rid+" "+isPass);
            var  happyBean=localStorage.getItem("happyBean");
            if (happyBean<1000){
                alert("欢乐豆数量不足，无法加入,请充值！")
                return;
            }
            global_rid=rid;
            if (isPass == 1) {
                //弹出框 输入密码
                $("#pass_div").dialog({
                    title: "房间密码",
                    width: 400,
                    height: 300
                });
                return;
            }
            //直接提交加入房间的请求
            //打开一个新页面进行游戏对局
            window.open("game.html?action=2&rid=" + global_rid);
        }

        /*有密码的加入房间*/
        function addRoomPass() {
            //获取密码
            var pass = $("#pass").val();
            //关闭弹窗
            $("#pass_div").dialog("close");
            //跳转到游戏页面，加入房间
            window.open("game.html?action=2&rid=" + global_rid + "&pass=" + pass);
        }
    </script>
    <style>
        .body_class {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .table_class {
            width: 100%;
            text-align: center;
        }

        .table_class td {
            padding: 20px;
            border: 1px solid white;
        }

        .table_class thead tr {
            background-color: aqua;
        }

        .table_class tbody tr:nth-child(even) {
            background-color: burlywood;
        }

        .table_class tbody tr:nth-child(odd) {
            background-color: gainsboro;
        }
    </style>
</head>
<body class="body_class">
<h1>欢乐豆记录列表</h1>

<table border="1" class="table_class">
    <thead>
    <tr>
        <td>房间编号</td>
        <td>房主信息</td>
        <td>房间描述</td>
        <td>密码</td>
        <td>房间状态</td>
        <td>操作类型</td>
    </tr>
    </thead>
    <tbody id="mytbody">

    </tbody>
</table>
<div id="pass_div" style="display: none">
    <div>
        房间密码：<input id="pass" style="margin-top: 20px" type="password"/>
        <button onclick="addRoomPass()" style="margin-top: 20px">加入房间</button>
    </div>
</div>
</body>
</html>
